<extend name="public@base"/>
<block name="main">
  <div class="wrap js-check-wrap">
    <ul class="nav nav-tabs">
      <li class="nav-item"><a class="nav-link" href="{:url('NavMenu/index',['nav_id'=>$nav_id])}">导航菜单</a></li>
      <li class="nav-item"><a class="nav-link active">{:lang('ADMIN_MENU_ADD')}</a></li>
    </ul>
    <form class="form-horizontal js-ajax-form margin-top-20" method="post" action="{:url('NavMenu/addPost')}">
      <fieldset>
        <div class="form-group form-row">
          <label class="col-2 col-form-label text-right">上级:</label>
          <div class="col col-lg-6">
            <select class="form-control" name="parent_id">
              <option value="0">/</option>{$nav_trees}
            </select>
          </div>
        </div>
        <div class="form-group form-row">
          <label class="col-2 col-form-label text-right"><span class="form-required"></span>地址:</label>
          <div class="col col-lg-6 form-inline">
            <input id="external-link-radio" type="radio"/>
            <input class="form-control" id="external-link-input" type="text" name="href"/>
            <input id="select-href-radio" type="radio"/>
            <select class="form-control" id="select-href" name="href">
              <option value="{:base64_encode('home')}" data-name="首页">首页</option><foreach name="navs" item="vo">
              <optgroup label="{$vo.name}">{$vo.html}</optgroup></foreach>
            </select>
          </div>
        </div>
        <div class="form-group form-row">
          <label class="col-2 col-form-label text-right"><span class="form-required">*</span>菜单名称:</label>
          <div class="col col-lg-6">
            <input class="form-control" id="name-input" type="text" name="name"/>
          </div>
        </div>
        <div class="form-group form-row">
          <label class="col-2 col-form-label text-right">打开方式:</label>
          <div class="col col-lg-6">
            <select class="form-control" name="target">
              <option value="">默认方式</option>
              <option value="_blank">新窗口打开</option>
            </select>
          </div>
        </div>
        <div class="form-group form-row">
          <label class="col-2 col-form-label text-right">图标:</label>
          <div class="col col-lg-6">
            <input class="form-control" type="text" name="icon" value=""/>
          </div>
        </div>
        <div class="form-group form-row">
          <label class="col-2 col-form-label text-right">显示:</label>
          <div class="col col-lg-6">
            <select class="form-control" name="status">
              <option value="1">显示</option>
              <option value="0">隐藏</option>
            </select>
          </div>
        </div>
        <div class="form-group form-row">
          <div class="col-auto offset-lg-2">
            <input type="hidden" name="nav_id" value="{$nav_id}"/>
            <button class="btn btn-sm btn-primary js-ajax-submit" type="submit">{:lang("SAVE")}</button><a class="btn btn-sm btn-secondary" href="{:url('NavMenu/index',['nav_id'=>$nav_id])}">返回</a>
          </div>
        </div>
      </fieldset>
    </form>
  </div>
</block>
<block name="bottom-script">
  <script>
    $(function () {
        $("#select-href,#select-href-radio").click(function () {
            checkChange(2);
        });
        $("#select-href").change(function () {
            var $this = $(this);
            var label = $this.find("option[value='" + $this.val() + "']").data('name');
            $('#name-input').val(label);
        });
        $("#external-link-input,#external-link-radio").click(function () {
            checkChange(1);
        });
        function checkChange(i) {
            if (i == 1) {
                //自动输入url
                $('#external-link-input').attr('name', 'external_href');
                $('#select-href').removeAttr('name');
                $('#select-href-radio').prop('checked', false);
                $('#external-link-radio').prop('checked', true);
            } else {
                //选择链接url
                $('#select-href').attr('name', 'href');
                $('#external-link-input').removeAttr('name');
                $('#select-href-radio').prop('checked', true);
                $('#external-link-radio').prop('checked', false);
            }
        }
    });
  </script>
</block>